<template>
  <div class="app-container">
    <div v-if="$route.fullPath.indexOf('detail')===-1" style="margin: 0 10%">
      <h1>菜品管理</h1>
      <el-tree
        :data="data"
        style="font-size: 18px "
        :props="{
          label: 'label',
          children: 'children',
          isLeaf:'isLeaf'
        }"
        :load="loadNode"
        highlight-current
        lazy>
        <div style="width: 100%" slot-scope="{ node, data }">
          <el-row>
            <el-col :span="6" style="font-size: 20px;">
              <span v-if="node.level===1" :style="{fontWeight: node.level===1?'bolder':'normal'}">
               {{ data.label }}
              </span>
              <li v-else>
                {{ data.label }}
              </li>
            </el-col>
            <el-col :span="2" :offset="16" v-if="node.level===1">
              <el-link style="font-size: 18px;" type="primary"
                       @click="$router.push({path:'/food/detail',query:{classificationId:data.id}})">添加
              </el-link>
            </el-col>
            <el-col :span="2" :offset="16" v-else>
              <el-link :style="{fontSize: node.level===1?'18px':'16px'}" :type="node.level===1?'primary':'warning'"
                       @click="$router.push({path:'/food/detail',query: {id:data.id}})">详情
              </el-link>
            </el-col>
          </el-row>
        </div>
      </el-tree>
    </div>
    <router-view v-else/>
  </div>
</template>

<script>
  import request from "@/utils/request";

  export default {
    name: "index",
    data() {
      return {
        data: [],
      }
    },

    methods: {
      initData() {

      },
      loadNode(node, resolve) {
        console.log('node', node, resolve);
        const data = []
        if (node.level === 0) {
          request({
            url: '/classification',
            params: {
              shopId: this.$store.state.user.shop.id
            }
          }).then(v => {
            resolve(v.data.map((v, index) => {
              return {
                id: v.id,
                classificationId: v.id,
                index,
                label: v.name,
                isLeaf: false
              }
            }))
          }).finally(() => {

          })
        }

        if (node.level === 1) {
          request({
            url: '/food',
            params: {
              classificationId: node.data.classificationId
            }
          }).then(v => {
            resolve(v.data.map((v, index) => {
              return {
                id: v.id,
                index,
                label: v.name,
                isLeaf: true
              }
            }))
          }).finally(() => {

          })
        }

      }
    }
  }
</script>

<style scoped>

</style>
